<template>
    <div class="register">
        <div class="back" @click="back">X</div>
        <div class="title"><h3>注册</h3></div>
        <van-form @submit="onSubmit" style="margin-top: 10px;">
            <van-field  v-model="uname" name="uname" label="用户名" placeholder="请输入用户名" />

            <van-field  v-model="upassword" type="password" name="upass" label="密码" placeholder="请输入密码" style="margin-top: 5px;"/>
            <van-field  v-model="upassword2" type="password" name="upass2" label="确认密码" placeholder="请输入密码" style="margin-top: 5px;"/>

            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">注册</van-button>
            </div>
            <div class="login">
                <router-link class="link" to="/login"><b>已有账号？立即登录！</b></router-link>
            </div>
        </van-form>    
    </div>
</template>

<style lang="less" scoped>
.register{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
    background: linear-gradient(to top,#a5bfe0, #4672c9);
    .back{
        color: #ccc;
        font-size: 1rem;
        margin-top: 5px;
        margin-left: 5px;
    }
    .title{
        width: 6.25rem;
        margin: 0 auto;
        margin-top: 20px;
        text-align: center;
        color: #ccc;
    }
    .login{
        font-size: 18px;
        margin-left: 5px;
        a{
            color: #ccc;
        }
    }
    .message{
        font-size: 16px;
        margin-top: 10px;
        margin-left: 5px;
        background-color: #ccc;
        a{
            color: blue;
        }
    }
    .van-checkbox {
      display: inline-block !important;
    }
}
</style>

<script>
import { Toast,Field,Dialog } from 'vant'
let users=[];
let users_str=localStorage.getItem('token');
if(users_str){
    users=JSON.parse(users_str)
}
// console.log(users);


export default {
    data(){
        return{
            uname:'',
            upassword:'',
            upassword2:'',
        }
    },
    methods:{
        onSubmit(values){
            let uname=values.uname
            let upass=values.upass
            let upass2=values.upass2
            
            let arr=users.filter(item => {
                return item.username == uname;
            })
            
            if(uname==''||upass==''||upass2==''){
                Toast('输入框不能为空~')
                return false
            }
            if(arr.length==1){
                Toast('该账号已存在')
                return false
            }
            if(upass.length<6){
                Toast('密码需要6位以上')
                return false
            }
            if(upass!=upass2){
                Toast('两次输入密码不一致~')
                return false
            }
            let obj = {}
            obj.id = Math.random().toString().slice(2)+"_"+(new Date().getTime())
            obj.username = uname
            obj.password = upass
            users.push(obj)

            let str =  JSON.stringify(users)
            localStorage.setItem('users',str);

            Dialog.alert({
                message: '注册成功，跳转登录。',
            }).then(() => {
                this.$router.push({path: '/login'})
            });
        },
        back(){
           this.$router.push({path: '/home'})
        }
    }
}
</script>